<template>
  <div class="mobile" ref="Mobile">
    <div class="menu"></div>
    <div class="componts">
      <div class="compont">
        <div class="title">数字输入框</div>
        <NumberInput :max="100" :min="0" v-model="inputNumber1"/>
        <div class="model">数字输入框值:{{ inputNumber1 }}</div>
        <pre class="code">
&lt;NumberInput :max="100" :min="0" v-model="inputNumber" /&gt;
        </pre>
        <pre class="code">
import NumberInput from '@/components/mobile/NumberInput'

export default {
components: {
    NumberInput
},
data() {
    return {
    inputNumber1: 1
    }
}
        </pre>
      </div>
      <div class="compont">
        <div class="title">带输入面板的数字输入框</div>
        <NumberInput
          :max="100"
          :min="0"
          v-model="inputNumber2"
          :parent-page="$refs"
        />
        <div class="model">数字输入框值:{{ inputNumber2 }}</div>
        <pre class="code">
&lt;template&gt;
&lt;div class="mobile" ref="Mobile"&gt;
    &lt;NumberInput :max="100" :min="0" v-model="inputNumber2" :parent-refs="$refs"/&gt;
    &lt;NumberPanel ref="NumberPanel" parent-name="Mobile" :parent-refs="$refs" /&gt;
&lt;/div&gt;
&lt;/template&gt;
        </pre>
        <pre class="code">
import NumberInput from '@/components/mobile/NumberInput'
import NumberPanel from '@/components/mobile/NumberPanel'

export default {
components: {
    NumberInput,
    NumberPanel
},
data() {
    return {
    inputNumber2: 1
    }
}
        </pre>
      </div>
      <div class="compont">
        <div class="title">滚动选择框</div>
        <div class="field-select" @click="showSelectPanel('下列选择', 'name')">
          {{ selectValue }}
        </div>
        <div class="model">选择值:{{ selectValue }}</div>
        <div class="model">选择对象:{{ selectItem }}</div>
        <pre class="code">
&lt;template&gt;
&lt;div class="mobile" &gt;
    &lt;div class="field-select" @click="showSelectPanel('下列选择', 'name')"&gt;
    { { selectValue } }
    &lt;/div&gt;
&lt;/div&gt;
&lt;SelectPanel ref="selectPanel" /&gt;
&lt;/template&gt;
        </pre>
        <pre class="code">
import SelectPanel from '@/components/mobile/SelectPanel'

export default {
  name: 'Mobile',
  components: {
    SelectPanel
  },
  data() {
    return {
      selectValue: '',
      selectOptions: [{ name: '名称1' }, { name: '名称2' }, { name: '名称3' }, { name: '名称4' }, { name: '名称5' }],
      selectItem: {}
    }
  },
  methods: {
    showSelectPanel(title, field) {
      this.$refs.selectPanel.show(title, this.selectOptions, field, (value, item) => {
        this.selectValue = value
        this.selectItem = item
      })
    }
  }
}
        </pre>
      </div>
      <div class="compont">
        <div class="title">多选择滚动框</div>
        <div class="field-select" @click="showSelectMultiplePanel()">
          {{ selectMultipleValue }}
        </div>
        <div class="model">选择值:{{ selectMultipleValue }}</div>
        <div class="model">选择对象:{{ selectMultipleValues }}</div>
        <div class="model">选择对象:{{ selectMultipleItem }}</div>
        <pre class="code">
&lt;template&gt;
&lt;div class="mobile" &gt;
    &lt;div class="field-select" @click="showSelectMultiplePanel()"&gt;
    { { selectMultipleValue } }
    &lt;/div&gt;
&lt;/div&gt;
&lt;SelectMultiplePanel ref="SelectMultiplePanel" /&gt;
&lt;/template&gt;
        </pre>
        <pre class="code">
import SelectMultiplePanel from '@/components/mobile/SelectMultiplePanel'

export default {
  name: 'Mobile',
  components: {
    SelectMultiplePanel
  },
  data() {
    return {
      selectMultipleValue: '',
      selectMultipleValues: [],
      selectMultipleOptions: [{ name: '名称1', group: [{ subname: '名称11' }, { subname: '名称12' }] }, { name: '名称2', group: [{ subname: '名称21' }, { subname: '名称22' }] }, { name: '名称3', group: [{ subname: '名称31' }, { subname: '名称32' }] }],
      selectMultipleItem: {}
    }
  },
  methods: {
    showSelectMultiplePanel() {
      this.$refs.selectMultiplePanel.show('多选择滚动框', this.selectMultipleOptions, ['name', 'subname'], (values, item) => {
        this.selectMultipleValue = values[0]+" - "+values[1]
        this.selectMultipleValues = values
        this.selectMultipleItem = item
      })
    },
  }
}
        </pre>
      </div>
      <div class="compont">
        <div class="title">滚动条</div>
        <SlideBar v-model="slidebarValue" :scales="[0, 100, 200, 300, 400, 500]"/>
        <div class="model">滚动值:{{ slidebarValue }}</div>
        <pre class="code">
&lt;template&gt;
    &lt;div class="mobile" &gt;
       &lt;SlideBar v-model="slidebarValue" :scales="[0, 100, 200, 300, 400, 500]"/&gt;
    &lt;/div&gt;
&lt;/template&gt;
        </pre>
        <pre class="code">
import SlideBar from '@/components/mobile/SlideBar'

export default {
components: {
    SlideBar
},
data() {
    return {
        slidebarValue: 1
    }
}
        </pre>
      </div>
    </div>
    <NumberPanel ref="numberPanel" :parent-page="$refs" parent-ref="Mobile"/>
    <SelectPanel ref="selectPanel" />
    <SelectMultiplePanel ref="selectMultiplePanel" />
  </div>
</template>

<script>
import NumberInput from '@/components/mobile/numberInput'
import NumberPanel from '@/components/mobile/numberPanel'
import SelectPanel from '@/components/mobile/selectPanel'
import SelectMultiplePanel from '@/components/mobile/selectMultiplePanel'
import SlideBar from '@/components/mobile/slideBar'

export default {
  name: 'Mobile',
  components: {
    NumberInput,
    NumberPanel,
    SelectPanel,
    SelectMultiplePanel,
    SlideBar
  },
  data() {
    return {
      inputNumber1: 1,
      inputNumber2: 1,
      selectValue: '',
      selectOptions: [{ name: '名称1' }, { name: '名称2' }, { name: '名称3' }, { name: '名称4' }, { name: '名称5' }],
      selectItem: {},
      selectMultipleValue: '',
      selectMultipleValues: [],
      selectMultipleOptions: [{ name: '名称1', group: [{ subname: '名称11' }, { subname: '名称12' }] }, { name: '名称2', group: [{ subname: '名称21' }, { subname: '名称22' }] }, { name: '名称3', group: [{ subname: '名称31' }, { subname: '名称32' }] }],
      selectMultipleItem: {},
      slidebarValue: 0
    }
  },
  methods: {
    showSelectPanel(title, field) {
      this.$refs.selectPanel.show(title, this.selectOptions, field, this.selectValue, (value, item) => {
        this.selectValue = value
        this.selectItem = item
      })
    },
    showSelectMultiplePanel() {
      this.$refs.selectMultiplePanel.show('多选择滚动框', this.selectMultipleOptions, ['name', 'subname'], this.selectMultipleValues, (values, item) => {
        this.selectMultipleValues = values
        this.selectMultipleValue = values[0] + ' - ' + values[1]
        this.selectMultipleItem = item
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.mobile {
  //   .menu {
  //     width: 30%;
  //     float: left;
  //   }
  .field-select {
    position: relative;
    padding-right: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 30px;
  }

  .field-select::after {
    content: " ";
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    display: block;
    border-right: 1px solid #d9d9d9;
    right: 15px;
    border-top: 1px solid #d9d9d9;
    margin: 10px auto auto;
  }
  .componts {
    width: 100%;
    float: right;

    .compont {
      padding: 10px 0;

      .title {
        margin: 10px 0;
        font-size: 20px;
        text-align: left;
      }

      .model {
        margin: 10px;
        text-align: left;
      }

      .code {
        width: calc(100% - 20px);
        padding: 10px;
        border: 0;
        background: #eee;
        border-radius: 5px;
        font-size: 12px;
        color: #666;
        overflow: auto;
        text-align: left;
      }
    }
  }
}
</style>
